Infinite Scroll - 2

<div id="app"></div>
<div class="footer"></div>

const $app = document.querySelector('#app')
const $footer = document.querySelector('.footer')

const getList = (count) => {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = Array.from({length:5}).map((_,idx)=>{
        const id = (count*5)+idx+1
        return {id, data: `${id}번째 게시글입니다`}
      })
      resolve(data)
    },1000)
  })
}

const renderItem = ({id, data}) => {
  const item = document.createElement('li')
  item.innerHTML = `
    <div class="item-id">${id}</div>
    <div class="item-data">${data}</div>
  `
  return item
}
let count = 0
const fetchMore = async () => {
  $footer.classList.add("loading");
  const list = await getList(count ++)
  const frag = document.createDocumentFragment()
  list.forEach(item=> {
    frag.appendChild(renderItem(item))
  })
  $app.appendChild(frag)
  $footer.classList.remove("loading");
}

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting){
      fetchMore()
    }
  })
})

observer.observe($footer)

.footer {
  height : 50px;
  line-height: 50px;
  text-align:center;
}

#app li {
  display:flex;
  margin: 10px;
  border:1px solid black;
  height : 20vh;
  text-align :center;
  line-height: 20vh
}
.item-id {
  border-right: 1px solid black;
  width : 20%;
}
.item-data {
  width : 80%;
}

.loading:after {
  content: "... 로딩중 ...";
}